<template>
  <div class="mainBox">
    <pageTitle Title="订单管理"></pageTitle>
    <div class="searchBar">
      <el-select
        v-model="searchParam.batch"
        clearable
        class="mySelect1 m-2"
        placeholder="请选择考试批次"
      >
        <el-option
          v-for="item in store.batchList"
          :key="item.code"
          :label="item.name"
          :value="item.code"
        />
      </el-select>
      <el-select
        v-model="searchParam.type"
        clearable
        class="mySelect1 m-2"
        placeholder="请选择商品类型"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        class="myInput"
        v-model="searchParam.examNo"
        placeholder="请输入考号"
        clearable
      />
      <el-input
        class="myInput"
        v-model="searchParam.phone"
        placeholder="请输入手机号"
        clearable
      />
      <el-input
        class="myInput"
        v-model="searchParam.userNo"
        placeholder="请输入用户编号"
        clearable
      />
      <el-button>搜索</el-button>
    </div>
  </div>
</template>

<script setup>
import useBatchStore from '@/store/batchStore';
const store = useBatchStore();
const searchParam = reactive({
  batch: '',
  type: '',
  examNo: '',
  phone: '',
  userNo: '',
});

const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
];
</script>

<style lang="scss" scoped>
.searchBar {
  height: auto;
  line-height: 6rem;
}
@import '@/assets/css/mycss.css';
</style>
